import * as PIXI from 'pixi.js'
import Hlddz from "./model/hlddz";
let TextureCache = PIXI.utils.TextureCache

export interface UserAssetProps {
    baseContainer: PIXI.Container;
    posX?: number;
    posY?: number;
    scale?: number;
}

const avatarSize = 90
export class UserAsset {
    model: Hlddz = Hlddz.getInstance()
    container: PIXI.Container = new PIXI.Container();
    bgContainer: PIXI.Container = new PIXI.Container();
    avatarContainer: PIXI.Container = new PIXI.Container();
    assetContainer: PIXI.Container = new PIXI.Container();
    avatarSprite: PIXI.Sprite;
    hldNum: PIXI.Text;
    nickName: PIXI.Text;
    constructor(props: UserAssetProps) {
        props.baseContainer.addChild(this.container)
        this.container.scale.set(props.scale || 1)
        this.container.position.set(props.posX || 0, props.posY || 0)
        this.container.addChild(this.bgContainer)
        this.container.addChild(this.avatarContainer)
        this.container.addChild(this.assetContainer)
        this.init()
    }

    init() {
        this.container.visible = false
        this.renderBg()
        this.renderAvatar()
        this.renderAsset()
    }
    hidden() {
        this.container.visible = false
    }
    // 初始化要先调用这两个方法
    setUser(newName: string, newAvatar?: PIXI.Sprite) { // 切换角色
        !this.container.visible && (this.container.visible = true)
        this.nickName.text = newName
        if (newAvatar) {
            this.avatarSprite && this.avatarContainer.removeChild(this.avatarSprite)
            this.avatarSprite = newAvatar
            let scaleSize = Math.max(avatarSize / newAvatar.width, avatarSize / newAvatar.height)
            newAvatar.scale.set(scaleSize)
            this.avatarContainer.addChild(newAvatar)
        }
    }

    setHldNum(newNum: number) { // 切换欢乐豆数量
        this.hldNum.text = newNum.toString()
    }

    renderBg() {
        // 总容器的遮罩层
        let mask = new PIXI.Graphics()
        mask.beginFill('#fff')
        mask.drawRect(0, 0, 350, 100)
        mask.endFill()
        this.container.mask = mask;
        this.container.addChild(mask)
        // 渲染背景
        let bgRect = new PIXI.Graphics()
        bgRect.beginFill('#fff', 0.5)
        bgRect.drawRoundedRect(-75, -75, 400, 150, 75)
        bgRect.endFill()
        // 渲染边框
        const avatarSize = 97
        let borderRect = new PIXI.Graphics()
        borderRect.lineStyle(3, 'gold')
        borderRect.beginFill('#fff')
        borderRect.drawRoundedRect(0, 0, avatarSize, avatarSize, avatarSize)
        borderRect.endFill()
        borderRect.x = 27
        borderRect.y = 2
        this.bgContainer.addChild(borderRect)
        this.bgContainer.addChild(bgRect)
    }

    renderAvatar() {
        this.avatarContainer.x = 30
        this.avatarContainer.y = 5
        let mask = new PIXI.Graphics()
        mask.beginFill('#fff')
        mask.drawRoundedRect(0, 0, avatarSize, avatarSize, avatarSize)
        mask.endFill()
        this.avatarContainer.mask = mask;
        this.avatarContainer.addChild(mask)
    }
    renderAsset() {
        this.assetContainer.x = 140
        this.assetContainer.y = 0
        // 渲染昵称
        this.nickName = new PIXI.Text('', {
            fontFamily: "黑体",
            fill: '#fff',
            fontSize: 25,
            align: "center",
            dropShadow: true,
            dropShadowColor: "#000",
            dropShadowBlur: 4,
            dropShadowAngle: Math.PI / 2,
            dropShadowDistance: 2,
        }) as PIXI.Text;
        this.nickName.y = 10
        this.assetContainer.addChild(this.nickName)
        // 渲染欢乐豆容器
        let rect = new PIXI.Graphics()
        rect.lineStyle(1, '#fff', 0.3)
        rect.beginFill('#000', 0.3)
        rect.drawRoundedRect(0, 40, 130, 30, 30)
        rect.endFill()
        // 渲染欢乐豆icon
        let hldSprite = new PIXI.Sprite(TextureCache['hld'])
        hldSprite.scale.set(35 / hldSprite.width)
        hldSprite.x = 0
        hldSprite.y = 38
        rect.addChild(hldSprite)
        // 渲染欢乐豆数量
        this.hldNum = new PIXI.Text('', {
            fontFamily: "微软雅黑",
            fill: '#f4e9a8',
            fontSize: 20,
            align: "left",
            dropShadow: true,
            fontWeight: 'bold',
            dropShadowColor: "#f7c258",
            dropShadowBlur: 3,
            dropShadowAngle: Math.PI / 2,
            dropShadowDistance: 2,
        }) as PIXI.Text;
        this.hldNum.x = hldSprite.width + 8
        this.hldNum.y = 42
        rect.addChild(this.hldNum)
        this.assetContainer.addChild(rect)
    }
}